分析 -- 缓冲区查询

留言

效果图

过程

主要参考官方给的示例代码。

  1. 绘图工具
  2. 结束触发缓冲函数
  3. 更新查询几何为返回的缓冲区

官方案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Buffer</title>

<link rel="stylesheet" href="https://js.arcgis.com/3.21/esri/css/esri.css">
<style type="text/css">
    html,body,#map{
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0；
    }
</style>
</head>
<script type="text/javascript" src="https://js.arcgis.com/3.21/"></script>
<body>
<div id="map"></div>
</body>
<script type="text/javascript">
    require(["esri/map",
        "esri/geometry/Point",
        "esri/geometry/Polyline",
        "esri/geometry/Polygon",

        "esri/graphic",
        "esri/Color",

        "esri/tasks/BufferParameters",
        "esri/tasks/GeometryService",
        "esri/symbols/SimpleMarkerSymbol", 
        "esri/symbols/SimpleFillSymbol", 
        "esri/symbols/SimpleLineSymbol",
        "esri/SpatialReference", 

        "dojo/domReady!"],function(Map,Point,Polyline,Polygon,Graphic,Color,BufferParameters,GeometryService,SimpleMarkerSymbol,SimpleFillSymbol,SimpleLineSymbol,SpatialReference){

        var map=new Map("map",{
            basemap: "osm",
            center: [115.95,28.6826],
            zoom:"12"
        });


        var points=[new Point(116.026,28.6826),new Point(116.05,28.66),new Point(116.11,28.70),new Point(115.95,28.65)];
        var polylines=[new Polyline([[115.88,28.70],[115.88,28.67]]),new Polyline([[115.82,28.64],[115.89,28.59]])];
        var polygons=[new Polygon([[115.798499,28.783553],[115.75998,28.895433],[115.900834,28.821535],[115.785276,28.759237],[115.713987,28.733902]])];

        var geometryService=new GeometryService("https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
        
        map.on("load",function(){

            var lineSymbol=new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new Color([255,0,0]), 4)

            var markerSymbol=new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 10,
                new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new Color([100,100,100,0.1]), 1),
                new Color([255,0,0]));

            var fillSymbol=new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, 
                new SimpleLineSymbol("solid", new Color([255,0,0]), 1), 
                new Color([255,0,0]));

            for(var i=0;i<points.length;i++){
                map.graphics.add(new Graphic(points[i],markerSymbol))
            }
            for(var i=0;i<polylines.length;i++){
                map.graphics.add(new Graphic(polylines[i],lineSymbol))
            }
            for(var i=0;i<polygons.length;i++){
                map.graphics.add(new Graphic(polygons[i],fillSymbol))
            }


            // 点缓冲区
            var pointParams = new BufferParameters();
            pointParams.geometries  = points;  
            pointParams.distances = [ 1];
            pointParams.unit = GeometryService.UNIT_KILOMETER;
            pointParams.bufferSpatialReference = new SpatialReference({wkid: 32662});
            pointParams.outSpatialReference = new SpatialReference({wkid: 4326})

            geometryService.buffer(pointParams,function(features) {
                var symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, 
                    new SimpleLineSymbol("solid", new Color([197,97,20]), 1), 
                    new Color([197,97,20,1]));

                for(var i=0;i<features.length;i++){
                    console.log(features[i]);
                    map.graphics.add(new Graphic(features[i],symbol))
                }
            });

            // 线缓冲区
            var polyineParams=new BufferParameters();
            polyineParams.geometries=polylines;
            polyineParams.distances = [ 1];
            polyineParams.unit = GeometryService.UNIT_KILOMETER;
            polyineParams.bufferSpatialReference = new SpatialReference({wkid: 32662});
            polyineParams.outSpatialReference = new SpatialReference({wkid: 4326});

            geometryService.buffer(polyineParams,function(features) {
                var symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, 
                    new SimpleLineSymbol("solid", new Color([197,97,20]), 1), 
                    new Color([197,97,20,1]));

                for(var i=0;i<features.length;i++){
                    console.log(features[i]);
                    map.graphics.add(new Graphic(features[i],symbol))
                }
            });
            // 面缓冲区
            var polygonParams=new BufferParameters();
            polygonParams.geometries=polygons;
            polygonParams.geodesic=true;
            polygonParams.distances = [ 1];
            polygonParams.unit = GeometryService.UNIT_KILOMETER;
            polygonParams.bufferSpatialReference = new SpatialReference({wkid: 32662});
            polygonParams.outSpatialReference = new SpatialReference({wkid: 4326});

            geometryService.buffer(polygonParams,function(features) {
                var symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, 
                    new SimpleLineSymbol("solid", new Color([197,97,20]), 1), 
                    new Color([197,97,20,0.5]));

                for(var i=0;i<features.length;i++){
                    console.log(features[i]);
                    map.graphics.add(new Graphic(features[i],symbol))
                }
            });

        })
        
    });

</script>
</html>

缓冲区空间查询

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
var url = "http://localhost:6080/arcgis/rest/services/Eco/BJ_td_gd_nyd/MapServer";
require(["esri/map",
    "esri/layers/ArcGISDynamicMapServiceLayer",
    "dojo/dom",
    "dojo/on",
    "esri/tasks/QueryTask",
    "esri/toolbars/draw",
    "esri/tasks/query",

    "esri/geometry/Polygon",
    "esri/symbols/SimpleLineSymbol",
    "esri/symbols/SimpleFillSymbol",
    "esri/graphic",

    "esri/Color",
    "esri/tasks/BufferParameters",
    "esri/tasks/GeometryService",
    "esri/symbols/SimpleMarkerSymbol",
    "esri/symbols/SimpleFillSymbol",
    "esri/symbols/SimpleLineSymbol",
    "esri/SpatialReference",
    "dojo/domReady!"],
    function (Map, ArcGISDynamicMapServiceLayer, dom, on, QueryTask, Draw, Query, Polygon,
        SimpleLineSymbol, SimpleFillSymbol, Graphic, Color, BufferParameters, GeometryService, SimpleMarkerSymbol, SimpleFillSymbol,
        SimpleLineSymbol, SpatialReference) {
        var map = new Map("mapdiv");
        var layer = new ArcGISDynamicMapServiceLayer(url);
        map.addLayer(layer)

        //定义一个绘图工具
        var toolBar = new Draw(map);
        //给button绑定事件
        on(dom.byId("Btn"), "click", function () {
            //激活绘图工具，我要绘制一个面图形
            toolBar.activate(Draw.POLYGON);
        })
        on(toolBar, "draw-complete", function (result) {
            //获得绘图得到的面
            var geometry = result.geometry;
            //关闭绘图工具
            toolBar.deactivate();
            bufferSelect(geometry)
            queryGraphic(geometry);
        });

        function bufferSelect(geometry) {
            var polygons = [new Polygon(geometry.rings)];
            console.log(polygons)

            var geometryService = new GeometryService("https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");


            // 面缓冲区
            var polygonParams = new BufferParameters();
            polygonParams.geometries = polygons;
            polygonParams.geodesic = true;
            polygonParams.distances = [8];
            polygonParams.unit = GeometryService.UNIT_KILOMETER;
            polygonParams.bufferSpatialReference = new SpatialReference({ wkid: 32662 });
            polygonParams.outSpatialReference = new SpatialReference({ wkid: 4326 });
            geometryService.buffer(polygonParams, function (features) {
                console.log(features)
                var symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
                    new SimpleLineSymbol("solid", new Color([197, 97, 20]), 1),
                    new Color([207, 135, 89, 0.5]));

                for (var i = 0; i < features.length; i++) {
                    console.log(features[i]);
                    map.graphics.add(new Graphic(features[i], symbol))
                    queryGraphic(features[i])
                }
            });
            var fillSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
                new SimpleLineSymbol("solid", new Color([255, 0, 0]), 0.8),
                new Color([255, 0, 0]));
            for (var i = 0; i < polygons.length; i++) {
                map.graphics.add(new Graphic(polygons[i], fillSymbol))
            }
        }


        function queryGraphic(geometry) {
            //创建查询对象
            var queryTask = new QueryTask(url + "/0");
            //创建查询参数对象
            var query = new Query();
            //是否返回几何形状
            query.returnGeometry = true;
            //空间查询的几何对象
            query.geometry = geometry;
            //服务器给我们返回的字段信息，*代表返回所有字段
            query.outFields = ["*"];
            //空间参考信息
            query.outSpatialReference = map.spatialReference;
            //查询的标准，此处代表和geometry相交的图形都要返回
            query.spatialRelationship = Query.SPATIAL_REL_INTERSECTS;

            //执行空间查询
            queryTask.execute(query, showQueryResult);
        }

        function showQueryResult(queryResult) {
            //创建线符号
            var lineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new dojo.Color([255, 0, 0]), 3);
            //创建面符号
            var fill = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
                new SimpleLineSymbol("solid", new Color([30, 30, 30]), 1),
                new Color([133, 105, 70, 0.5]));
            var htmls = "";
            if (queryResult.features.length >= 1) {
                for (var i = 0; i < queryResult.features.length; i++) {
                    //得到graphic
                    var graphic = queryResult.features[i];
                    //给图形赋予符号
                    graphic.setSymbol(fill);
                    //添加到地图从而实现高亮效果
                    map.graphics.add(graphic);
                }
            }
        }
    });